<template>
	<div class="wrapper shouYe">
		<div class="bfff center info">
			<div>
				<div class="box-i">
					<div class="box-item" v-show="userInfo">
						<div class="box-img" v-if="userInfo.avatar">
							<img :src="userInfo.avatar" class="bor50 box-img" alt="" />
						</div>
						<div class="box-img" v-else>
							<img src="@/assets/image/index/user.jpg" class="bor50 box-img" alt="" />
						</div>
					</div>
					<div class="title-text">
						<div class="f20 c333 mb10">{{ userInfo.realName }}</div>
					</div>
				</div>
				<br />
				<div class="flex">
					<div class="center f14 ca2 flex-start">
						<span style="width: 30px">部门</span>
						<span class="c333 ml20 sheng">{{ userInfo.createDeptName }}</span>
						<!-- <div class="hr"></div> -->
						<!-- <span style="width: 30px">岗位</span
						><span class="c333 ml20 sheng">{{ userInfo.createPostName }}</span> -->
					</div>
					<div class="center ca2 f14 flex-start">
						<span style="width: 30px">签名 </span
						><span class="ml20 c333 sheng2">{{ userInfo.remark }}</span>
					</div>
				</div>
			</div>
			<div class="xiaoshou-item">
				<div class="cfff xiaoshou" @click="onToPersonKnowledge('2')">
					<div class="center align-end flex-start">
						<div class="f18 fbold">{{ accumulate(uploadCounts) }}</div>
						<div class="f18">&nbsp;份</div>
					</div>
					<div class="f16 mt15">累计上传文档</div>
				</div>
				<div class="cfff xiaoshou" @click="onToPersonKnowledge('3')">
					<div class="center align-end flex-start">
						<div class="f18 fbold">{{ accumulate(downloadCounts) }}</div>
						<div class="f18">&nbsp;份</div>
					</div>
					<div class="f16 mt15">累计下载</div>
				</div>
				<div class="cfff xiaoshou" @click="onToPersonKnowledge('4')">
					<div class="center align-end flex-start">
						<div class="f18 fbold">{{ accumulate(comment) }}</div>
						<div class="f18">&nbsp;次</div>
					</div>
					<div class="f16 mt15">累计评论</div>
				</div>
				<div class="cfff xiaoshou" @click="onToSubscribe()">
					<div class="center align-end flex-start">
						<div class="f18 fbold">{{ accumulate(subscribe) }}</div>
						<div class="f18">&nbsp;次</div>
					</div>
					<div class="f16 mt15">我的订阅</div>
				</div>
			</div>
		</div>
		<div class="center fWrap f14">
			<div class="bfff flex box boxs">
				<div class="echarts-oh">
					<div ref="main" class="echarts-oh-item" v-if="knowledgeList.length"></div>
					<div v-else>
						<div class="f16" style="font-weight: 700">知识库统计</div>
						<el-empty description="暂无数据" />
					</div>
				</div>
			</div>
			<div class="bfff flex box boxs">
				<div class="echarts-oh">
					<div ref="mains" class="echarts-oh-item" v-if="uploadListEcharts.length"></div>
					<div v-else>
						<div class="f16" style="font-weight: 700">月份文章统计</div>
						<el-empty description="暂无数据" />
					</div>
				</div>
			</div>
		</div>
		<div class="center fWrap f14">
			<div class="bfff flex box boxs">
				<div class="center ctheme">
					<img src="@/assets/image/geRen/t1.png" class="title-icon" alt="" />
					<div class="flex f16 fbold">最近浏览</div>
				</div>
				<div v-if="browseList && browseList.length">
					<div class="center" v-for="item in browseList" :key="item.id">
						<div class="clrcle"></div>
						<div class="flex nowrap c60 xiaoshou f14" @click="onTo(item)">{{ item.title }}</div>
						<div class="c903 author tRight f14">{{ item.createUser }}</div>
						<div class="c903 time tRight f14">{{ time(item.pubTime) }}</div>
					</div>
				</div>
				<div v-else class="empty">
					<img src="@/assets/image/geRen/kong.png" />
					<div>暂无数据</div>
				</div>
			</div>
			<div class="bfff flex box boxs">
				<div class="center ctheme">
					<img src="@/assets/image/geRen/t2.png" class="title-icon" alt="" />
					<div class="flex f16 fbold">最近下载</div>
				</div>
				<div v-if="downloadList && downloadList.length">
					<div class="center" v-for="item in downloadList" :key="item.id">
						<div class="clrcle"></div>
						<div class="flex nowrap c60 xiaoshou f14" @click="onTo(item)">{{ item.title }}</div>
						<div class="c903 author tRight f14">{{ item.createUser }}</div>
						<div class="c903 time tRight f14">{{ time(item.pubTime) }}</div>
					</div>
				</div>
				<div v-else class="empty">
					<img src="@/assets/image/geRen/kong.png" />
					<div>暂无数据</div>
				</div>
			</div>
		</div>
		<div class="center fWrap">
			<div class="bfff flex box boxs">
				<div class="center ctheme">
					<img src="@/assets/image/geRen/t3.png" class="title-icon" alt="" />
					<div class="flex f16 fbold">最新上传</div>
				</div>
				<div v-if="uploadList && uploadList.length">
					<div class="center" v-for="item in uploadList" :key="item.id">
						<div class="clrcle"></div>
						<div class="flex nowrap c60 xiaoshou f14" @click="onTo(item)">{{ item.title }}</div>
						<div class="c903 author tRight f14">{{ item.createUser }}</div>
						<div class="c903 time tRight f14">{{ time(item.pubTime) }}</div>
					</div>
				</div>
				<div v-else class="empty">
					<img src="@/assets/image/geRen/kong.png" />
					<div>暂无数据</div>
				</div>
			</div>
			<div class="bfff flex box boxs">
				<div class="center ctheme">
					<img src="@/assets/image/geRen/t4.png" class="title-icon" alt="" />
					<div class="flex f16 fbold">最近评论</div>
				</div>
				<div v-if="commentList && commentList.length">
					<div class="center" v-for="item in commentList" :key="item.id">
						<div class="clrcle"></div>
						<div class="flex nowrap c60 xiaoshou f14" @click="onTo(item)">{{ item.title }}</div>
						<div class="c903 author tRight f14">{{ item.createName }}</div>
						<div class="c903 time tRight f14" v-if="item.pubTime">{{ time(item.pubTime) }}</div>
					</div>
				</div>
				<div v-else class="empty">
					<img src="@/assets/image/geRen/kong.png" />
					<div>暂无数据</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from "echarts"
import { getAxios } from "/axios"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
//个人信息
const userList = ref([])
//最近上传
const uploadList = ref([])
//最近浏览
const browseList = ref([])
//最近评论
const commentList = ref([])
//最近下载
const downloadList = ref([])
//最近上传总数量
const uploadCounts = ref("")
//最近下载总数量
const downloadCounts = ref("")
//累计评论
const comment = ref("")
//我的订阅
const subscribe = ref(0)
//个人信息
const userInfo = ref({})
//柱状图
const knowledgeList = ref([])
//折线图
const uploadListEcharts = ref([])
//
const main = ref()
const mains = ref()
let myChart
let myCharts

async function list() {
	//最近浏览
	const res1 = await getAxios(`/kb/modelBaisc/selectBasic?status=1&current=1&size=5&type=1`)
	browseList.value = res1.records
	// //最近下载
	const res2 = await getAxios("/kb/modelBaisc/selectBasic?status=3&current=1&size=5&type=1")
	downloadList.value = res2.records
	downloadCounts.value = String(res2.total)
	// //最新上传
	const res3 = await getAxios("/kb/modelBaisc/selectBasic?status=2&current=1&size=5&type=1")
	uploadList.value = res3.records
	uploadCounts.value = String(res3.total)
	// //最近评论
	const res4 = await getAxios("/knowledge/kbComment/recentComment?current=1&size=5&type=1")
	commentList.value = res4.records
	//订阅
	const res5 = await getAxios(`/knowledge/kbUserLabel/findLabelByUserToBasicCount`)
	subscribe.value = res5
	// 柱状图
	knowledgeList.value = await getAxios(`/knowledge/kbBasicUser/knowledgeBaseTopN?num=7`)
	// 折线图
	uploadListEcharts.value = await getAxios(`/knowledge/kbBasicUser/theLatest12Quantities`)
	comment.value = String(res4.total)
	//个人信息
	userInfo.value = await getAxios("/system/sysUser/personInfo")
	if (knowledgeList.value.length != 0) {
		zzt()
	}
	if (uploadListEcharts.value.length != 0) {
		zxt()
	}
}
list()
//柱状图
function zzt() {
	const dataValue = []
	const seriesData = []
	knowledgeList.value.forEach(item => {
		dataValue.push(item.name)
		seriesData.push(item.num)
	})

	myChart = echarts.init(main.value)
	const option = {
		title: {
			text: "主题知识库文章统计",
		},
		xAxis: {
			type: "category",
			data: dataValue,
			axisLabel: {
				showMaxLabel: true,
				interval: 0,
				rotate: 0,
				formatter: function (value) {
					var texts = value
					if (texts.length > 10) {
						// 限制长度自设
						texts = texts.substr(0, 10) + "..."
					}
					return texts
				},
			},
		},

		yAxis: {
			type: "value",
		},
		tooltip: {
			trigger: "axis",
		},
		series: [
			{
				data: seriesData,
				type: "bar",
				barWidth: 15,
				itemStyle: {
					normal: {
						barBorderRadius: [30, 30, 0, 0],
					},
				},
			},
		],
	}

	option && myChart.setOption(option)
}
//折线图
function zxt() {
	const dataValue = []
	const seriesData = []
	uploadListEcharts.value.forEach(item => {
		dataValue.push(item.yyyyM)
		seriesData.push(item.num)
	})

	myCharts = echarts.init(mains.value)
	const option = {
		title: {
			text: "月份文章统计",
		},
		xAxis: {
			type: "category",
			// boundaryGap: false,
			data: dataValue,
			nameTextStyle: {
				shadowColor: "red",
			},
			axisLabel: {
				showMaxLabel: true,
				interval: 0,
				rotate: -40,
			},
		},
		yAxis: {
			type: "value",
		},
		tooltip: {
			trigger: "axis",
		},
		series: [
			{
				data: seriesData,
				type: "line",
				smooth: true,
				areaStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "#6179eb", // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#fff", // 100% 处的颜色
							},
						],
						global: false,
					},
				},
			},
		],
	}

	option && myCharts.setOption(option)
}
function time(times) {
	return times.substring(0, 10)
}
function accumulate(item) {
	return item ? item : 0
}
const onTo = item => {
	router.push(`/knowledgeDetails?id=${item.id}&swId=${item.swId}`)
}
const onToPersonKnowledge = val => {
	router.push(`/personKnowledge?type=${val}`)
}
const onToSubscribe = () => {
	router.push(`/personSubscribe`)
}
const onG = val => {
	router.push(`/personKnowledge?type=${val}`)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.shouYe {
	height: 100%;
	overflow-y: scroll;
	.box {
		padding: 20px;
		height: 280px;
		overflow: hidden;
		line-height: 1;
		@include maxWidth(768) {
			width: 100%;
			flex: auto;
		}
		&:first-of-type {
			margin-right: 20px;
			@include maxWidth(768) {
				margin-right: 0;
			}
		}
		.center {
			padding-bottom: 20px;
		}

		.ctheme {
			padding-bottom: 30px;
			.onGeng {
				cursor: pointer;
			}
		}

		.clrcle {
			width: 5px;
			height: 5px;
			background: #dddfe6;
			border-radius: 50%;
			margin-right: 10px;
		}

		// .author {
		// 	width: 300px;
		// }

		.time {
			width: 100px;

			@include maxWidth(500) {
				width: 80px;
			}
		}
		.echarts-oh {
			position: relative;
			// display: flex;
			// justify-content: center;
			overflow-x: scroll;
			height: 280px;
			.echarts-oh-item {
				width: 100%;
				// max-width: 800px;
				height: 260px;
				position: absolute;
				left: 0px;
				top: 0px;
			}

			.echarts-oh-item-top {
				top: -20px;
			}
			:deep(.el-empty) {
				padding: 0;
			}
		}
		.empty {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			img {
				width: 150px;
				height: 150px;
			}
			div {
				margin-top: 10px;
				color: #909399;
			}
		}
	}

	.title-icon {
		width: 20px;
		margin-right: 10px;
	}

	.bfff {
		border-radius: 3px;
		margin-bottom: 20px;
		.sheng {
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			// padding-bottom: 30px;
		}
		.sheng2 {
			width: 300px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			@include maxWidth(1400) {
				width: 250px;
			}
		}
	}

	.info {
		padding: 20px;
		// justify-content: left;
		overflow-x: scroll;
		@include maxWidth(1024) {
			display: block;
			padding: 30px 40px;
		}
		@include maxWidth(768) {
			padding: 20px 2vw;
		}
		.xiaoshou-item {
			display: flex;
			justify-content: space-between;
			@include maxWidth(1250) {
				flex-wrap: wrap;
			}
			@include maxWidth(1024) {
				flex-wrap: nowrap;
			}
			@include maxWidth(650) {
				flex-wrap: wrap;
			}
			.cfff {
				width: 250px;
				height: 100px;
				margin-left: 30px;
				padding: 22px;
				line-height: 1;
				@include maxWidth(1700) {
					width: 200px;
				}
				@include maxWidth(1500) {
					margin-left: 20px;
					width: 180px;
				}
				@include maxWidth(1320) {
					margin-left: 20px;
					width: 150px;
				}
				@include maxWidth(1250) {
					margin-left: 20px;
					width: 45%;
					margin-bottom: 5px;
				}
				@include maxWidth(1024) {
					margin-left: 10px;
					width: 45%;
					margin-bottom: 5px;
				}

				&:nth-of-type(1) {
					background: url(@/assets/image/geRen/i1.png) right center;
					background-size: 110% 110%;
					border-radius: 10px;
				}

				&:nth-of-type(2) {
					background: url(@/assets/image/geRen/i2.png) center;
					background-size: 100% 100%;
					border-radius: 10px;
				}

				&:nth-of-type(3) {
					background: url(@/assets/image/geRen/i3.png) center;
					background-size: 100% 100%;
					border-radius: 10px;
				}
				&:nth-of-type(4) {
					background: url(@/assets/image/geRen/i4.png) center;
					background-size: 100% 100%;
					border-radius: 10px;
				}
			}
		}

		.hr {
			width: 1px;
			height: 10px;
			background: #eeeeee;
			margin: 0 20px 0;
		}
	}
}
.xiaoshou {
	cursor: pointer;
}
.box-i {
	display: flex;
	.box-item {
		margin-right: 15px;
		width: 60px;
		height: 60px;
		.box-img {
			height: 100%;
			width: 100%;
		}
	}
}
.title-text {
	padding-top: 20px;
}
</style>
